/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import Taro, { Component } from '@tarojs/taro'

// project
import { CPage, CContent, CHeader, CFooter, CFloat, CAround, CBetween, CCenter, CRow, CWrap, CLine, CHand, CItemX, CItemY, CText, CLabel, CSvg, CImage, CButton, CColumn } from '../../../library/comp';
import { Base64, Gen, Time, Zip, Session, Storage, Http, Toast } from '../../../library/func';
import Icon from '../../../project/style/icon';
import DoHttp from '../../../project/func/http/http';

/******************************************************************************************
 * Export Class
 ******************************************************************************************/

export default class Index extends Component {

	/*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
	constructor(props) {
		super(props);

		/**
		 * state
		 */
		this.state = {
			userInfo: {},
			set_dist_number: '',
			set_commission: 0,
			commission_today: 0,
			commission_month: 0,
			commission_total: 0,
			fans_count: 0,
		}
	}

	/*------------------------------------------------------------------------------------
	 * 生命周期
	 *-----------------------------------------------------------------------------------*/
	// didMount
	componentDidMount() {
		Storage.get({
			key: 'userInfo',
			success:(res)=>{
				console.log(res);
				this.setState({
					userInfo:res,
				})
			}
		});

		DoHttp.get({
			url:'vip/home.php',
			success:(res)=>{
				this.setState({
					set_dist_number:res.user.set_dist_number,
					set_commission:res.user.set_commission,
					commission_today: res.commission_today.toFixed(2),
					commission_month:res.commission_month.toFixed(2),
					commission_total:res.commission_total.toFixed(2),
					fans_count:res.fans_count,
				})
			}
		})
	}
	
	/*------------------------------------------------------------------------------------
	 * 事件处理
	 *-----------------------------------------------------------------------------------*/
    // onRedirect
    onRedirect = (url, e)=> {
        wx.redirectTo({
            url: url
        })
    }

    // onNavigate
    onNavigate = (url, e)=> {
		wx.navigateTo({
			url: url
		})
    }

	/*------------------------------------------------------------------------------------
	 * 自定义方法
	 *-----------------------------------------------------------------------------------*/
	config = {
        navigationBarTitleText: 'vip首页',
        navigationBarBackgroundColor: '#dd2f3c',
        navigationBarTextStyle: '#fff'
    }

	//复制剪贴板
	copyText = (e) => {
		wx.setClipboardData({
			data: this.state.set_dist_number,
			success: function(res) {
			  wx.getClipboardData({
				success: function(res) {
				  console.log(res.data) // data
				}
			  })
			}
		})		  
	}

	// 轻提示
    onToast = ()=> {
		Toast.text('暂未开放此功能');
    }
	/*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
	render () {
		return (
			<CPage>
				<CContent style="background:#F7F7F7" pb="200">
					
					{/* VIP信息、店铺分享 */}
					<CRow h='400' rb="40" y="top" bg="#232323">
						<CRow h="200" mt="60" y="center" class="f08">
							<image lazyLoad={true} style="width:120rpx; height:120rpx; border-radius: 120rpx; margin-left:25rpx;"  src={ this.state.userInfo.avatarUrl }></image>
							<CItemY ml="30" x="left">
								<text style="color:#fff; font-size:32rpx; line-height:32rpx">{ this.state.userInfo.nickName  }</text>
								<CRow>
									<text style="color:#fff; font-size:28rpx; line-height:28rpx; line-height:36rpx">邀请码：{ this.state.set_dist_number }</text><CHand onClick={ this.copyText.bind(this) } ml="30" px="30" ra="40" bg="#404040" size="28" color="#fff">复制</CHand>
								</CRow>
							</CItemY>
						</CRow>	
						<CRow h="200" y="center" mt="60" class="f02">

							{/* {>>>>>>>>>>>>>>>>>  分享功能} */}
							<CHand mr="-30" class="f1" x="center" ra="40" py="10" bg="#DAB983" size="28" color="#866D3C">店铺分享</CHand>
						</CRow>
					</CRow>	

					{/* 可消费佣金、预估收入 */}
					<CRow  mt='-100' x="center" >
						<CColumn class="f095" pa="40" bg="#E6C697" ra="20">
							<CRow>
								<CItemY class="f1" x="left">
									<CText size="28" lh="40" color="#866D3C">可消费金额(元)</CText>
									<text style="font-size:80rpx; line-height:80rpx; color:#866D3C">{ this.state.set_commission }</text>
								</CItemY>
								<CHand class="f1" x="right">
									<CText onClick={ this.onNavigate.bind(this, '/screen/vip/vip/equity') } size="32" ra="20" px="20" py="30" bg="#FEF4EB" color="#866D3C">VIP权益</CText>
								</CHand>
							</CRow>

							<CBetween mt="20" y="center">
								<CItemY x="center" class="f05" onClick={ this.onNavigate.bind(this, '/screen/vip/vip/prediction?type=today') }>
									<text style="font-size:28rpx; line-height:28rpx; color:#866D3C">{ this.state.commission_today }</text>
									<CText size="26" lh="40" color="#866D3C">今日预估收入</CText>
								</CItemY>

								<CHand bg="#866D3C" w="1" h="40"></CHand>

								<CItemY x="center" class="f05" onClick={ this.onNavigate.bind(this, '/screen/vip/vip/prediction?type=month') }>
									<text style="font-size:28rpx; line-height:28rpx; color:#866D3C">{ this.state.commission_month }</text>
									<CText size="26" lh="40" color="#866D3C">本月预估收入</CText>
								</CItemY>

								<CHand bg="#866D3C" w="1" h="40"></CHand>

								<CItemY x="center" class="f05" onClick={ this.onNavigate.bind(this, '/screen/vip/vip/prediction?type=total') }>
									<text style="font-size:28rpx; line-height:28rpx; color:#866D3C">{ this.state.commission_total }</text>
									<CText size="26" lh="40" color="#866D3C">累计预估收入</CText>
								</CItemY>
							</CBetween>

							<CLine x="center" mt="20">
								<CText size="26" lh="40" color="#866D3C">退款,不结算佣金</CText>
							</CLine>

						</CColumn>
					</CRow>

					{/* 粉丝数、分享创业礼包等等 */}
					<CRow mt='20' x="center">
						<CBetween class="f095" bg='#fff' mt="20" y="center" ra="20">
							<CItemY x="center" pa="20" class="f05" onClick={ this.onNavigate.bind(this, '/screen/vip/vip/fans/list') }>
								<text style="font-size:26rpx; line-height:48rpx; color:#222">{ this.state.fans_count }</text>
								<CText size="24" lh="14" color="#999">粉丝数（个）</CText>
							</CItemY>

							<CHand bg="#eee" w="2" h="40"></CHand>

							<CItemY x="center" pa="20" class="f05" onClick={ this.onNavigate.bind(this, '/screen/vip/vip/share/gift') }>
								<CText size="26" lh="48" color="#222">分享创业礼包</CText>
								<CText size="24" lh="48" color="#999">赚100元</CText>
							</CItemY>

							<CHand bg="#eee" w="2" h="40"></CHand>

							<CItemY x="center" pa="20" class="f05" onClick={ this.onNavigate.bind(this, '/screen/vip/vip/share/invite') }>
								<CText size="26" lh="48" color="#222">邀请专属粉丝</CText>
								<CText size="24" lh="48" color="#999">赚佣金</CText>
							</CItemY>
						</CBetween>
					</CRow>

					{/* 数据统计 */}
					<CRow mt='20' x="center">
						<CColumn class="f095" bg='#fff' mt="20" y="center" ra="20">
							<CLine x="left" bb="#eee solid 1">
								<CText size="28" ml="40" lh="100">数据统计</CText>
							</CLine>
							<CBetween>
								{/* {>>>>>>>>>>>>>>>>>  此功能尚未开启} */}
								<CItemY x="center" pa="20" class="f05" onClick={ this.onToast.bind(this) }>
									<CSvg w='60' h='60' icon={Icon.fav} />
									<CText size="24" lh="60" color="#999"mt="10">浏览用户</CText>
								</CItemY>

								<CItemY x="center" pa="20" class="f05" onClick={ this.onNavigate.bind(this, '/screen/vip/vip/prediction?type=total') }>
									<CSvg w='60' h='60' icon={Icon.package} />
									<CText size="24" lh="60" color="#999"mt="10">推广订单</CText>
								</CItemY>

								{/* {>>>>>>>>>>>>>>>>>  需要跳页} */}
								{/* <CItemY x="center" pa="10" class="f05">
									<CSvg w='30' h='30' icon={Icon.store} />
									<CText size="12" lh="30" color="#999"mt="5">销售详情</CText>
								</CItemY> */}

								{/* {>>>>>>>>>>>>>>>>>  需要跳页} */}
								{/* <CItemY x="center" pa="10" class="f05">
									<CSvg w='30' h='30' icon={Icon.presenter} style="color:#000" />
									<CText size="12" lh="30" color="#999"mt="5">买家管理</CText>
								</CItemY> */}
							</CBetween>
						</CColumn>
					</CRow>
				</CContent>
			</CPage>
		)
	}
}


